<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload = function(){
            
            function getStyle (ele, attr) {
            if (ele.currentStyle) {
                return ele.currentStyle[attr]
            } else {
                return getComputedStyle(ele, false)[attr]
            }
        }
             function move(ele,attr,end,duration,fn){
                var start = parseInt(getStyle(ele,attr));
                var distance = end -start;
                var steps = parseInt(duration / 20);
                var speeds = distance / steps; 
                clearInterval(ele.timer);
                console.log(start,distance,steps,speeds)
                var n =0;
                ele.timer = setInterval(function(){
                    n++;
                    ele.style[attr] = start + n * speeds +'px';
                    if(n === steps){
                        clearInterval(ele.timer);
                        ele.style[attr] = end + 'px';
                        fn && fn();
                    }
                },20)  
                
                }       
                document.querySelector("#box").onclick = function(){
                    move(this,'width',400,2000,() => {
                        move(this,'height',400,2000)
                    })
                }  
            }
            
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>